<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorator="themes/default/layout/public">

<div  layout:fragment="content">
    <div th:if="${currentUser==null}" class="jumbotron text-center">
        <h4><th:block th:text="${GlobalSetting.website.welcome}"></th:block> <a class="btn btn-primary ml-10" href="/account/register" role="button">立即注册</a> <a class="btn btn-default ml-5" href="/account/login" role="button">用户登录</a></h4>
    </div>

    <div class="row mt-10">
        <div class="col-xs-12 col-md-9 main">
            <div class="widget-box mb-10">
                <h4 class="widget-box-title">最新推荐</h4>
                <div class="job-list-item row">
                    <div class="col-md-6">
                        <div id="carousel-recommendation" class="carousel slide" data-ride="carousel">
                            <!-- Indicators -->
                            <ol class="carousel-indicators">
                                <li th:if="${state.index<5}" th:each="rec,state:${latestRecommendations}" data-target="#carousel-recommendation" th:attr="data-slide-to=|${state.index}|"  th:class="${state.index==0}?'active'" ></li>
                            </ol>
                            <!-- Wrapper for slides -->
                            <div class="carousel-inner" role="leftmodbox">
                                <div th:if="${state.index<5}" th:each="rec,state:${latestRecommendations}"  class="item" th:classappend="${state.index==0}?'active'">
                                    <a th:href="${rec.url}" target="_blank"><img th:src="${rec.logo}" th:alt="${rec.subject}"></a>
                                    <div class="carousel-caption">
                                        <h4 th:text="${rec.subject}"></h4>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <ul class="widget-links list-unstyled">
                            <li th:if="${state.index>=5}" th:each="rec,state:${latestRecommendations}" class="widget-links-item">
                                <a th:href="${rec.url}" target="_blank" th:text="${rec.subject}"></a>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
            <div class="widget-box">
                <div class="job-list-item row">
                    <div class="col-md-6">
                        <h4 class="widget-box-title">最新问题 <a href="{{ route('website.ask',['category_slug'=>'all','filter'=>'newest']) }}" target="_blank" title="更多">»</a> </h4>
                        <ul class="widget-links list-unstyled">
                            <li th:each="question:${latestQuestions}" class="widget-links-item">
                                <a th:title="${question.title}" target="_blank"  th:href="|/question/${question.id}|" th:text="${question.title}"></a>
                                <small class="text-muted"><th:block th:text="${#sets.size(question.answers)}"></th:block> 回答</small>
                            </li>

                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h4 class="widget-box-title">悬赏问题 <a href="{{ route('website.ask',['category_slug'=>'all','filter'=>'reward']) }}" target="_blank" title="更多">»</a></h4>

                        <ul class="widget-links list-unstyled">
                            <li  th:each="question:${latestRewardQuestion}"class="widget-links-item">
                                <span class="text-gold"><i class="fa fa-database"></i><th:block th:text="${question.price}"></th:block></span>
                                <a target="_blank" th:title="${question.title}" th:href="|/question/${question.id}|" th:text="${question.title}"></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="widget-box">
                <div class="job-list-item row">
                    <div class="col-md-6">
                        <h4 class="widget-box-title">热门文章 <a href="{{ route('website.blog',['category_slug'=>'all','filter'=>'hottest']) }}" title="更多">»</a></h4>
                        <ul class="widget-links list-unstyled">
                            <li  th:each="article:${hotArticles}" class="widget-links-item">
                                <a th:title="${article.title}" target="_blank"  th:href="|/article/${article.id}|" th:text="${article.title}"></a>
                                <small class="text-muted"><th:block th:text="${article.views}"></th:block> 浏览</small>
                            </li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h4 class="widget-box-title">最新文章 <a href="{{ route('website.blog',['category_slug'=>'all','filter'=>'newest']) }}" title="更多">»</a></h4>
                        <ul class="widget-links list-unstyled">
                            <li th:each="article:${latestArticles}" class="widget-links-item">
                                <a th:title="${article.title}" target="_blank"  th:href="|/article/${article.id}|" th:text="${article.title}"></a>
                                <small class="text-muted"><th:block th:text="${article.views}"></th:block> 浏览</small>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>

            <div class="widget-box clearfix"  >
                <h4 class="widget-box-title">推荐专家 <a href="{{ route('website.experts') }}" title="更多">»</a></h4>
                <div id="auths" class="row row-horizon pre-scrollable">
                    <section th:each="au:${recommendAuthentication}" class="col-sm-6 col-md-3">
                        <div class="thumbnail">
                            <a th:href="|/space/${au.user.id}|" target="_blank"><img class="avatar-128" th:src="${au.user.avatar}" th:alt="${au.realName}"></a>
                            <div class="caption">
                                <h4 class="text-center"><a th:href="|/space/${au.user.id}|" th:title="${au.realName}" th:text="${au.realName}"></a></h4>
                                <p class="text-muted text-center" th:title="${au.title}" th:text="|${au.title}&nbsp;|"></p>
                                <p class="text-center"><a class="btn btn-primary btn-sm" th:href="|/question/create?toUserId=${au.user.id}|">向TA提问</a></p>
                            </div>
                        </div>
                    </section>
                </div>
            </div>

        </div>
        <div class="col-xs-12 col-md-3 side">
            <div class="side-alert alert alert-link">
                <a href="/question/create" class="btn btn-warning btn-block">我要提问</a>
                <a href="/article/create" class="btn btn-primary btn-block">分享经验</a>
            </div>

            <th:block th:include="themes/default/layout/auth_menu"></th:block>

            <div class="widget-box">
                <h4 class="widget-box-title">最新公告</h4>
                <ul class="widget-links list-unstyled">
                    <li th:each="notice:${latestNotices}" class="widget-links-item">
                        <a th:title="${notice.subject}" th:href="${notice.url}" th:text="${notice.subject}"></a>
                    </li>
                </ul>
            </div>

            <div class="widget-box">
                <h2 class="h4 widget-box-title">热议话题 <a href="/topics" title="更多">»</a></h2>
                <ul class="taglist-inline multi">
                    <li th:each="tag:${hotTags}" class="tagPopup"><a class="tag" data-toggle="popover"  th:href="|/topic/${tag.id}|" target="_blank" th:text="${tag.name}"></a></li>
                </ul>
            </div>

            <div class="widget-box mt30">
                <h2 class="widget-box-title">
                    财富榜
                    <a href="{{ route('auth.top.coins') }}" title="更多">»</a>
                </h2>
                <ol class="widget-top10">
                    <li th:each="user:${mostCoinUsers}" class="text-muted">
                        <img class="avatar-32" th:src="${user.avatar}">
                        <a th:href="|/space/${user.id}|" class="ellipsis" target="_blank" th:text="${user.nickname}"></a>
                        <span class="text-muted pull-right"><th:block th:text="${user.data.coin}"></th:block> 金币</span>
                    </li>
                </ol>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            // setInterval(function(){
            // //     // $("#auths").scrollRight($("#auths").scrollRight()+5);
            //     // $("#auths").animate({scrollRight: 5}, 800);
            //     var leftPos = $('#auths').scrollLeft();
            //     $("#auths").animate({scrollLeft: leftPos + 2000});
            // },1);
        });
    </script>
</div>